﻿@using EasyUIMvc
@model List<MenuItem>
<div class="row">
<div class="span4">
<h2>LinkButton</h2>

@Html.EasyUI().LinkButton(settings=>{
    settings.Id="linkbutton";
    settings.Text = "Trang chủ";
    settings.DataOptions = "iconCls:'icon-search'";
    settings.Href = "/Sample/Index";
}).GetHtml()

@*<a id="btn" href="/Sample/Index" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>  *@
    </div>
<div class="span4">
<h2>Menu</h2>
@Html.EasyUI().Menu(settings =>
{
    settings.Id = "menu";
}).Bind(Model).GetHtml()
@*<div id="menu" class="easyui-menu" style="width:120px;">  
<div>New</div>  
<div>  
<span>Open</span>  
<div style="width:150px;">  
<div data--options="iconCls:'icon-save'"><b>Word</b></div>  
<div>Excel</div>  
<div>PowerPoint</div>  
<div>
<span>test1</span>
<div>
<div data-options="iconCls:'icon-save',href:'/Sample/Index'">test2</div>
<div>test3</div>
</div>
</div>
</div>  
</div>  
<div data-options="iconCls:'icon-save'">Save</div>  
<div class="menu-sep"></div>  
<div>Exit</div>  
</div>*@
<button onclick="showmenu()">Hiển thị trình đơn</button>
<script>
    function showmenu() {
        $('#menu').menu('show', {
            left: 200,
            top: 100
        });
    }
    $(document).ready(function () {
        $('#menu').menu('show', {
            left: 200,
            top: 100
        });
    });
</script>
     </div>
<div class="span4">
<h2>MenuButton</h2>
@*<a href="javascript:void(0)" id="mb" class="easyui-menubutton"   
        data-options="menu:'#mm',iconCls:'icon-edit'">Edit</a>  
<div id="mm" style="width:150px;">  
    <div data-options="iconCls:'icon-undo'">Undo</div>  
    <div data-options="iconCls:'icon-redo'">Redo</div>  
    <div class="menu-sep"></div>  
    <div>Cut</div>  
    <div>Copy</div>  
    <div>Paste</div>  
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove'">Delete</div>  
    <div>Select All</div>  
</div>  *@
@Html.EasyUI().Menu(settings =>
{
    settings.Id = "menu";
}).Bind(Model).GetHtml()
@Html.EasyUI().MenuButton(settings => { settings.Text = "Test"; settings.DataOptions = "menu:'#menu'"; }).GetHtml()
    </div>
    </div>
<div class="row">
    <div class="span4">
<h2>Calendar</h2>

@Html.EasyUI().Calendar(settings => settings.Id = "calendar").GetHtml()

@*<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>  *@
        </div>
    <div class="span4">
<h2>ComboBox</h2>

@Html.EasyUI().ComboBox(settings =>{
    settings.Id = "cb1";
}).Bind(new Dictionary<string, string>
        {
        {"ly","Viet Nam"},
        {"lala","Lao"},
        {"test","Campuchia"}
    }).GetHtml()

@*<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">  
    <option value="aa">aitem1</option>  
    <option>bitem2</option>  
    <option>bitem3</option>  
    <option>ditem4</option>  
    <option>eitem5</option>  
</select>  *@
        </div>
    </div>
<div class="row">
    <div class="span4">
<h2>Window</h2>

@Html.EasyUI().Window(settings=>{
    settings.Id="window";
    settings.Title="Window Sample";
    settings.DataOptions = "iconCls:'icon-save',modal:true";
    settings.Style = "width:600px;height:400px";
}).Content("This is for test").GetHtml();
@*<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"  
        data-options="iconCls:'icon-save',modal:true">  
    Window Content  
</div>  *@
@*<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"  
        data-options="iconCls:'icon-save',modal:true">  
    <div class="easyui-layout" data-options="fit:true">  
        <div data-options="region:'north',split:true" style="height:100px"></div>  
        <div data-options="region:'center'">  
            The Content.  
        </div>  
    </div>  
</div>  *@

<button onclick="$('#window').window('open')">Kiểm tra cửa sổ</button>
    </div>
    <div class="span4">
        <h2>DataGrid</h2>
@*<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
            data-options="url:'/Sample/GetJson'">
        <thead>
            <tr>
                <th data-options="field:'Id',width:80">ID</th>
                <th data-options="field:'Name',width:100">Name</th>
                <th data-options="field:'Age',width:80,align:'right'">Age</th>
            </tr>
        </thead>
</table>*@
@Html.EasyUI().DataGrid(settings =>
{
    settings.Id = "dg";
    settings.Title = "Danh mục hàng hóa";
    settings.DataOptions = "url:'/Sample/GetJson'";
}).Bind(
        new Dictionary<string, string> { 
            {"field:'Id'","Id"},
            {"field:'Name'","Name"},
            {"field:'Age'","Age"}
        }).GetHtml()
    </div>
    <div class="span4">
<h2>Tree</h2>

@Html.EasyUI().Tree(
    settings=>{
        settings.DataOptions = "url:'/Sample/TreeData'";
        settings.Id = "tree";
    }).GetHtml()

@*<ul id="tree" class="easyui-tree" data-options="url:'/Sample/TreeData'"></ul>*@

@*<ul id="tt" class="easyui-tree">  
    <li>  
        <span>Folder</span>  
        <ul>  
            <li>  
                <span>Sub Folder 1</span>  
                <ul>  
                    <li>  
                        <span><a href="#">File 11</a></span>  
                    </li>  
                    <li>  
                        <span>File 12</span>  
                    </li>  
                    <li>  
                        <span>File 13</span>  
                    </li>  
                </ul>  
            </li>  
            <li>  
                <span>File 2</span>  
            </li>  
            <li>  
                <span>File 3</span>  
            </li>  
        </ul>  
    </li>  
    <li>  
        <span>File21</span>  
    </li>  
</ul>  *@
        </div>
</div>